import React from 'react';
import { Layout, Menu, Button } from 'antd';
import { useNavigate, Outlet } from 'react-router-dom';
import useUserStore from '../store/userStore';
import { APP_NAME } from '../utils/constant';

const { Header, Content, Footer, Sider } = Layout;

const UserLayout = (props) => {
  const user = useUserStore((state) => state.user);
  console.log('user', user)
  const clearUser = useUserStore((state) => state.clearUser);


  const navigate = useNavigate();

  const handleLogout = () => {
    console.log('User logged out');
    clearUser()
    navigate('/login');
  };

  const handleMenuClick = (e) => {
    navigate(e.key);
  };

  const menuItems = [
    {
      key: '/concept',
      label: '概念表',
    },
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider>
        <div className="logo" style={{ color: 'white', textAlign: 'center', padding: '16px' }}>
          {APP_NAME}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['/concept']}
          onClick={handleMenuClick}
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fff' }}>
          <div>
            <span>Email: {user?.email || 'Guest'}</span> | <span>ID: {user?.id || '-'}</span>
          </div>
          <Button type="primary" onClick={handleLogout}>
            退出登录
          </Button>
        </Header>
        <Content style={{ margin: '16px' }}>
          <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>{APP_NAME} {`©${new Date().getFullYear()}`}</Footer>
      </Layout>
    </Layout>
  );
};

export default UserLayout;